<mat-toolbar>
  <span class="toolbar-title">批量设置</span>
  <ng-template [ngIf]="strategyType">
    （{{getTypeLabel(strategyType)}}）
  </ng-template>
  <div class="toolbar-sub-title" *ngIf="strategy">
    <div class="prop">
      <span class="prop-name subordinated">方向</span>
      <span [class.order-side-buy]="strategy.side==='buy'"
            [class.order-side-sell]="strategy.side==='sell'">
        {{strategy.side}}
      </span>
    </div>
    <!--<div class="prop">
      <span class="prop-name subordinated">关注价格</span>
      <span>{{strategy.watchDirection}}</span>
    </div>-->
    <div class="prop">
      <span class="prop-name subordinated">交易所</span>
      <span>{{strategy.ex}}</span>
    </div>
  </div>
  <span class="spacer"></span>
</mat-toolbar>


<div class="container">
  <div class="section">

    <app-strategy-edit-candidates [ex]="ex"
                                  [strategyType]="strategyType"
                                  [strategyExPairs]="strategyExPairs"
                                  [strategy]="strategy"></app-strategy-edit-candidates>
  </div>


  <div class="section">
    <div class="title-bar">
      <span class="section-title primary-color">策略模板</span>
      <span class="spacer"></span>
    </div>

    <div class="section-content">

      <div class="field-box">
        <mat-form-field floatLabel="always" class="short-field">
          <mat-label>状态</mat-label>
          <mat-select [(ngModel)]="strategy.status">
            <mat-option *ngFor="let opt of statusOptions" [value]="opt.value">
              {{opt.label}}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field floatLabel="never" class="short-field">
          <input matInput placeholder="基点" disabled>
          <mat-hint align="start">设为当前价格</mat-hint>
        </mat-form-field>

        <mat-form-field floatLabel="always" class="short-field">
          <input matInput placeholder="交易量" [(ngModel)]="strategy.tradeVolPercent"
                 *ngIf="!strategy.tradeVolByValue">
          <input matInput placeholder="交易量" [(ngModel)]="strategy.tradeVol" *ngIf="strategy.tradeVolByValue">
          <span matSuffix [hidden]="strategy.tradeVolByValue">%</span>
          <mat-hint>
            <ng-template [ngIf]="strategy.side === 'buy'">
              报价币种
              <span *ngIf="strategy.quoteCcy">&nbsp;({{strategy.quoteCcy}})</span>
            </ng-template>
            <ng-template [ngIf]="strategy.side === 'sell'">
              基础币种
              <span *ngIf="strategy.baseCcy">&nbsp;({{strategy.baseCcy}})</span>
            </ng-template>
          </mat-hint>
        </mat-form-field>

        <div class="slide-field trade-vol-slide">
          <mat-slide-toggle [(ngModel)]="strategy.tradeVolByValue">交易量：数值</mat-slide-toggle>
        </div>
      </div>

      <div class="field-box">
        <mat-form-field floatLabel="always" class="short-field">
          <input matInput placeholder="期望" [(ngModel)]="strategy.expectingPercent"
                 (blur)="expectingPercentChanged()">
          <span matSuffix>%</span>
        </mat-form-field>

        <mat-form-field floatLabel="always" class="short-field" *ngIf="drawbackField">
          <input matInput placeholder="允许回落" [(ngModel)]="strategy.drawbackPercent">
          <span matSuffix>%</span>
        </mat-form-field>

      </div>

      <div class="field-box">
        <div class="slide-field mat-form-field short-field" *ngIf="strategy.type==='LS'||strategy.type==='HB'">
          <mat-slide-toggle [(ngModel)]="strategy.updateBasePoint">更新基点</mat-slide-toggle>
        </div>
        <mat-form-field floatLabel="always" class="short-field">
          <mat-label>Executor</mat-label>
          <mat-select [(ngModel)]="strategy.executor">
            <mat-option *ngFor="let opt of executorOptions" [value]="opt.value">
              {{opt.label}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div class="field-box-prompt">对于修改：</div>
      <div class="field-box">
        <div class="slide-field">
          <mat-slide-toggle [(ngModel)]="resetBasePoint">（按当前价格）重设基点</mat-slide-toggle>
        </div>
        <div class="slide-field">
          <mat-slide-toggle [(ngModel)]="clearPeak">清除峰/谷值</mat-slide-toggle>
        </div>
      </div>

    </div>

    <div class="title-bar">
      <span class="spacer"></span>
      <button mat-button (click)="goback()">
        <mat-icon>arrow_back</mat-icon>
        返回
      </button>
      <button mat-button color="primary" (click)="save()" [disabled]="saving">
        <mat-icon>save</mat-icon>
        保存
      </button>
    </div>

  </div>

</div>


<p>&nbsp;</p>
